<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <style>
        #table tr td {
            width: 115px;
            text-align: center
        }
        #table tr:nth-of-type(even){
            background-color: rgb(214, 151, 34) !important ;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三123" /></p>
            <p>年龄<input id="age" type="text" value="21" /></p>
            <p>性别
                <select id="gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                    <option value="秘密">你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <script>
        function formatData( arr ){                         //封装一个formatData方法，形参为arr
            bodyEle.innerHTML = '' ;                        //每次调用这个方法时，将tbody中的内容清除
            arr.forEach(function( obj ){                    //将对象数组进行循环，第一层循环取到对象数组中的每一个对象
                var tr = document.createElement("tr");      //每遍历一个对象，就创建一个tr元素
                for( let key in obj ){                      //内层循环遍历对象的每一个键值
                    var td = document.createElement("td");  //每存在一个键值，就创建一个td标签
                    td.innerHTML = `${obj[key]}`;           //将键值放到td标签中
                    tr.appendChild(td);                     //最后将每一个td标签放到tr标签中
                }
                var tdDel = document.createElement("td");   //创建一个放置删除按钮的td标签
                var btnDel = document.createElement("button");//创建一个删除按钮的标签
                btnDel.innerHTML = '删除' ;                     //删除按钮中的文字为删除
                tdDel.appendChild(btnDel);                  //将删除按钮放在创建的放置删除按钮的td标签中
                tr.appendChild(tdDel);                      //将放置删除按钮的td标签放在tr元素中    
                bodyEle.appendChild(tr);                    //将每一个tr元素放在table表格中tbody标签中
            });
            delBtn();                                       //给每次调用页面显示数据时，绑定一个点击删除事件的方法
        }       
        function delBtn( ){                                     //封装一个删除按钮的方法
            var btnDel = document.querySelectorAll("button");   //首先获取到所有的删除按钮，这些删除按钮元素组成一个伪数组
            btnDel.forEach(function( btn , key ){               // 遍历这个伪数组，获取每一个按钮元素和它的键名
                btn.onclick = function(){                       //每次点击删除时会触发以下操作                       
                    arr.splice(key,1);                          //页面中每个删除绑定的是那一行的元素，所以每次删除时删除那一行元素
                                                                //而所有删除事件的键名对应的也是对象数组中对象对应的键名，即删除对象对应的键名就会删除这个对象
                                                                //再显示时，就不会显示这个对象
                    formatData(arr);                            //让数组在页面上显示
                }
            });
        }
        var unameEle = document.getElementById("username");     //获取名字元素
        var ageEle = document.getElementById("age");            //获取age元素
        var genderEle = document.getElementById("gender");      //获取gender元素
        var addBtn = document.querySelector("#addBtn");         //获取添加元素
        var sortBtn = document.querySelector("#sortBtn");       //获取排序元素
        var tabEle = document.querySelector("#table");          //获取表格元素
        var bodyEle = document.querySelector("#table tbody");   //获取表格的tbody元素
        var arr = [] ;                                          //创建一个新数组用来存储对象
        addBtn.onclick = function () {          //点击添加时会触发以下事件
            var obj = {                     //创建一个对象
                name:unameEle.value,        //让对象中键名为name的键值为名字元素的value值
                age:ageEle.value,           //让对象中键名为age的键值为年龄元素的value值
                gender:genderEle.value      //让对象中键名为gender的键值为性别元素的value值
            }
            arr.push(obj);                  //将每次点击添加创建的对象放到数组中
            formatData(arr);                //调用formatData方法，让数组中的数据在页面上显示
        }
        sortBtn.onclick = function (){      //点击排序按钮会触发以下操作
            arr.sort(function(a,b){         //给对象数组进行排序
                return a.age - b.age ;      //排序规则是按照数组中对象的年龄从小到大排序
            });
            formatData(arr);                //让排好序的数组在页面上显示
        }
    </script>
</body>

</html>